認証機能ライブラリ Auth.jsのOAuth認証をNext.jsで試す
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
Auth.js
Auth.jsは、Next.jsなどのプロジェクトに認証機能を実装するライブラリになります。
元々は、NextAuth.jsという名前のライブラリでした。現在は、Next.jsに特化しているわけではなく、他のフレームワークでも使用できるのでAuth.jsに代わっています。そのため、公式サイトの遷移先のGIthubはNext Auth.jsのままだったりします。
今回はNext.jsプロジェクトで、Auth.jsの認証をSetup with OAuthチュートリアルを試してみました。
認証機能の実装
Next.jsプロジェクトの作成
Next.jsプロジェクトを作成します。
npx create next-app sample_authjs --ts
cd sample_authjs
Auth.jsの設定
Auth.jsをインストールします。名前は、next-authのままのようです。
yarn add next-auth
pages/api配下に、auth/[...nextauth].jsを作成し、ここで、Google、GitHub、Twitterなどの使用する認証プロバイダーを指定します。
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
export default NextAuth({
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
});
_app.tsxに移動し、コンポーネントをSessionProviderでラッピングします。
import { SessionProvider } from "next-auth/react";
import { AppProps } from "next/app";
const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
};
export default App;
useSessionから認証情報、状態を取得できます。フックは、SessionProvider内のどこからでも呼び出すことができます。
statusによってログインの有無を識別し、signIn,signOut関数でログイン処理を実装します。
pages/index.tsxを以下のように変更します。signIn関数の引数にプロバイダーを指定して渡すこともできます。
import { useSession, signIn, signOut } from "next-auth/react";
export default function CamperVanPage() {
const { data: session, status } = useSession();
const userEmail = session?.user?.email;
if (status === "loading") {
return <p>Hang on there...</p>;
}
if (status === "authenticated") {
return (
<>
<p>Signed in as {userEmail}</p>
<button onClick={() => signOut()}>Sign out</button>
<img style={{ width: "400px" }} src="https://cdn.pixabay.com/photo/2017/08/11/19/36/vw-2632486_1280.png" />
</>
);
}
return (
<>
<p>Not signed in.</p>
<button onClick={() => signIn("github")}>Sign in</button>
</>
);
}
プロバイダーの設定
次にプロバイダーの設定を行います。チュートリアルに倣って、GitHubプロバイダーを設定します。
Githubにログインして、プロフィールの[Settings]から、[Developer settings]、[OAuth Apps]へと移動します。
右上の[New OAuth App]から、OAuthの情報を登録します。
アプリケーション名などを入力し、callback URLには、以下を指定します。
http://localhost:3000/api/auth/callback/github
遷移したページでClient IDと、Client secretsをそれぞれコピーします。Client secretsは、[Generate a new client Secret]のボタンをクリックすると、表示されます。
プロジェクトに戻り、.env.localファイルを作成し環境変数を追加します。
GITHUB_ID="クライアントID" GITHUB_SECRET="クライアントシークレット"
ローカル環境を立ち上げ、ログインできるか確認します。
yarn dev
「Sign In」ボタンから、Github認証を行います。
ログインできました。この車がどういう意味なのかは、わかりません...
Github上でも確認してみます。
まとめ
今回は、Auth.jsを使ったプロバイダー認証を試してみました。基本的な機能しか実装していませんが、シンプルで使いやすかったです。今後は、セッション情報の格納なども試したいと思います。
ではまた。
